<template>
    <div>
       <Top><p>订单</p></Top>
     <div v-if="dingdan">
<div class="content" v-for="(v,i) in dingdan" :key="i">
  <div class="content-left"><img :src="'https://elm.cangdu.org/img/'+v.shop.image_path" alt=""></div>
  <div class="content-right" @click="foods(v)">
<!--    {{v[i].name}}-->
    <div>
      <h4 class="div-h4">{{v.shop.name}}<van-icon name="arrow" />
      <br><span class="time">2020-11-16-21:43</span></h4> <span>等待支付</span></div>

    <div class="divtwo"><span>{{v.foods[0].name }} 等{{v.foods.length}}件商品</span> <span>{{v.sum}}</span></div>
<div class="zhifu">
  <p>去支付(还剩<van-count-down :time="time" />)</p>
</div>
  </div>

<div></div>

</div>
     </div>
       <Ibottom></Ibottom>
    </div>
</template>

<script>
    import Top from "../components/Top";
    import Ibottom from "../components/Ibottom";
    import {mapState} from "vuex";
    export default {
        name: "Indent",
        components: {Ibottom, Top},
      created() {
         console.log(JSON.parse(localStorage.dingdan))
        this.dingdan=JSON.parse(localStorage.dingdan)
      },
      data() {
        return {
          dingdan:"",
          time:1*16*60*1000,
        }
      },
      computed: {
        ...mapState(["corder","shop","sum"]),
        messsum(){
          let sum=0;
          for (let i in this.$store.state.corder){
            let Obj=this.$store.state.corder[i];
            sum+=Obj.packing_fee;
          }
          return sum;
        }
      },
      methods: {
        foods(v) {
this.$store.commit("clickdingdan",v)
          console.log(v);
          this.$router.push("/indentxiangqing")
        }
      },
    }
</script>

<style scoped>
    .content {
       display: flex;
        background-color: #fff;
    display: flex;
    margin-bottom: .5rem;
    padding: .6rem .6rem 0;

    }
    .content-left{
      width: 20%;
      
    }
    .content-left img{
      width: 4rem;
      height: 4rem;
      margin-right: .4rem;
    }
    .content-right{
      width: 78%;
    
    }
    .content-right div{
      display: flex;
      justify-content: space-between;
      border-bottom: .025rem solid #f5f5f5;
      padding-bottom: .3rem;

    }
    .content-right div:nth-child(1){
      line-height: 35px;
    }
    .div-h4{
      line-height: 20px;
    }
    .time{
      font-size: .55rem;
      color: #999;
      line-height: .8rem;
    }
    .zhifu p{
      color: orange;
      border-width: 1px;
      border-style: solid;
      border-color: orange;
      font-size: .55rem;
      //padding: .1rem .2rem;
      border-radius: .15rem;
      //line-height: 5px !important;
    //height: 10px;
    }
    .zhifu{
      justify-content: flex-end!important;
      line-height: 10px;
      //ine-height: 10px!important;
      //height: 10px;

    }
    .divtwo{
      line-height: 35px;
    }
    .divtwo span:nth-child(1){
font-size: .6rem;
    color: #666;
    width: 10rem;
    }
    .divtwo span:nth-child(2){
    font-size: .6rem;
    color: #f60;
    font-weight: 700;
    }
    /deep/.van-count-down{
      color: orange;
      display: inline-block !important;
      //ine-height: 10px!important;
      //height: 10px;
      position: 0 !important;
    }
</style>